import { getCurrentInstance, onMounted, onUnmounted, reactive, ref } from 'vue';
import * as echarts from 'echarts';

export default function importConfig(props) {
  const { width, height, chartData } = props;
  const myEcharts = echarts;

  onMounted(() => {
    setTimeout(() => {
      initChart();
    }, 100);
  });

  onUnmounted(() => {
    myEcharts.dispose;
  });

  function initChart() {
    const chart = myEcharts.init(document.getElementById('raddarChart'), 'purple-passion');
    const opt1 = {
      legend: {
        top: 'bottom',
        data: ['Allocated Budget', 'Actual Spending'],
      },
      radar: {
        // shape: 'circle',
        radius: '60%',
        indicator: [
          { name: 'Sales', max: 6500 },
          { name: 'Administration', max: 16000 },
          { name: 'Information Technology', max: 30000 },
          { name: 'Customer Support', max: 38000 },
          { name: 'Development', max: 52000 },
          { name: 'Marketing', max: 25000 },
        ],
      },
      series: [
        {
          name: 'Budget vs spending',
          type: 'radar',
          data: [
            {
              value: [4200, 3000, 20000, 35000, 50000, 18000],
              name: 'Allocated Budget',
            },
            {
              value: [5000, 14000, 28000, 26000, 42000, 21000],
              name: 'Actual Spending',
            },
          ],
        },
      ],
    };
    chart.setOption(opt1);

    window.addEventListener('resize', function () {
      chart.resize();
    });
  }

  return {};
}
